<template>
  <div class="warpper-box sendSalary">
    <enterprise-select v-if="userInfo.type == 4" ref="enterprise" @enterpriseChange="enterpriseChange"></enterprise-select>
    <a-card style="margin-top: 10px;">
      <a-form layout="inline">
        <a-form-item label="姓名">
          <a-input placeholder="请输入员工姓名" v-model="params.name"></a-input>
        </a-form-item>
        <a-form-item label="年份">
          <!-- <a-input placeholder="请输入员工姓名" v-model="params.period"></a-input> -->
          <date-picker v-model="params.period" type="year" placeholder="选择年" value-format="yyyy" size="small"></date-picker>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" icon="search" @click="loadTable(true)">搜索</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" icon="setting" @click="reset">重置</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="importVisible = true">导入专项附加扣除</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-card style="margin-top: 10px;">
      <a-table :columns="table.columns" :data-source="table.loadData" :pagination="table.pagination"
        @change="handleTableChange" rowKey="importId">
        <!-- 操作栏-->
        <span slot="action" slot-scope="text, record">
          <!-- 编辑模块 | 字段 -->
          <a-popconfirm title="是否确认删除？" ok-text="确认" cancel-text="取消" @confirm="remove(record)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </a-card>
    <!-- 导入发薪明细 -->
    <a-modal v-model="importVisible" title="导入专项附加" width="540px" :footer="null">
      <a-alert message="第一步：下载导入信息模板；模版内的表头请勿改动，防止导入时出错。" type="info" />
      <a-button type="primary" @click="downloadSpecial" ghost style=";margin: 20px 0;width: 160px;">下载模板</a-button>
      <a-alert message="第二步：批量导入数据；请填写完整的信息。" type="info" />
      <a-button type="primary" @click="importSpecial" style="margin: 20px 0;width: 160px;">上传文件</a-button>
      <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ref="fileExcel"
        @change="importSpecialHandle" style="display: none;" />
    </a-modal>
  </div>
</template>

<script>
import store from '@/store'
import EnterpriseSelect from "@/components/human/enterpriseSelect.vue"
import {
  PARAMS_SPECIALADD,
  COLUMNS_SPECIALADD
} from "./form"
import {
  OPTION_BLOCK,
  OPTION_INLINE
} from "../base_form"
import {
  getTablePage,
  incomeExportImport,
  incomeDelete
} from "@/api/human/ensureSpecialAdd"
import { DatePicker } from 'element-ui';
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'specialAdd',
  components: {
    DatePicker,
    EnterpriseSelect
  },
  data() {
    return {
      params: {
        period: "",
        name: "",
      },
      table: {
        columns: COLUMNS_SPECIALADD,
        loadData: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      pagination: { current: 1, pageSize: 10 },

      enterpriseId: "", // 企业id
      enterpriseData: [], // 客户列表
      importVisible: false, // 导入专项附加显示

      selectedRowKeys: [], // 选择的table数据id
      selectedRows: [], // 选择的table数据
    }
  },
  filters: {
    filterMore(value, num) {
      if (!value) return ''
      if (value.length > num) {
        return value.slice(0, num) + '...'
      }
      return value
    }
  },
  mounted() {
    window.addEventListener('keyup', this.keyDown);
    if (this.userInfo.type == 4) {
      this.$refs.enterprise.getEnterpriseData();
    } else {
      this.enterpriseId = this.userInfo.relationId
      this.loadTable(true);
    }
  },
  destroyed() {
    window.removeEventListener('keyup', this.keyDown);
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    })
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {

  },
  methods: {
    // table复选框选择
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    // 获取企业员工列表
    async loadTable(flag) {
      let params = this.params;
      if (flag) {
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.enterpriseId = this.enterpriseId;
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const { code, data } = await getTablePage(params);
      if (code === '1') {
        this.table.loadData = data.content;
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination) {
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    // 下载模板
    downloadSpecial() {
      const fileName = '专项附加模板.xlsx';
      const elink = document.createElement('a'); // 创建a标签
      elink.download = fileName;
      elink.style.display = 'none';
      elink.href = "https://pro-lhyg.oss-cn-shenzhen.aliyuncs.com/down/%E4%B8%93%E9%A1%B9%E6%89%A3%E9%99%A4.xlsx"; // 下载链接
      document.body.appendChild(elink);
      elink.click(); // 点击下载
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink); // 释放标签
    },
    // 导入表单
    importSpecial() {
      this.$refs.fileExcel.click();
    },
    importSpecialHandle(e) {
      e.preventDefault();
      let _this = this;
      let file = e.target.files[0];
      if (file === undefined) {
        return;
      }
      if (file.name.indexOf('.xls') === -1) {
        _this.$message.error("只支持xlsx");
        e.target.value = "";
        return;
      }
      if (!(file.size / 1024 / 1024 < 20)) {
        _this.$message.error('模版大小不能超过 20MB!');
        e.target.value = "";
        return;
      }
      e.target.value = "";
      if (file) {
        let formData = new FormData();
        formData.append("enterpriseId", _this.enterpriseId);
        formData.append("file", file);
        incomeExportImport(formData).then((res) => {
          if (res.code == 1) {
            _this.importVisible = false;
            _this.$message.success('操作成功');
            _this.loadTable(true);
          }
        })
      }
    },
    // 删除
    async remove(row) {
      let params = {
        importId: row.importId,
      }
      const { code } = await incomeDelete(params);
      if (code === '1') {
        this.$message.success('操作成功');
        this.loadTable(true);
      }
    },
    // 企业选择回调
    enterpriseChange(value) {
      this.enterpriseId = value;
      this.loadTable(true);
    },
    addLoad() {
      this.loadTable(true);
    },
    reset() {
      this.params.period = "";
      this.params.name = "";
      this.loadTable(true);
    }
  }
}
</script>
<style lang="less"></style>